// 导入 React，用来创建 react 元素的
import React from 'react';
// 导入对应渲染平台库
import ReactDOM from 'react-dom/client';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// JSX 中的条件渲染
// 条件
const loading = true;

// 渲染（UI）
const loadingUI = <h1>数据加载中...</h1>;
const successUI = <h1>数据加载完毕！</h1>;

// 函数
const fn = () => {
  if (loading) {
    return loadingUI;
  } else {
    return successUI;
  }
};

// 页面
// 函数的形式
const el = <div>{fn()}</div>;
// 三元运算符
const el2 = <div>{loading ? loadingUI : successUI}</div>;
// 逻辑与 && ，计算它左边两边表达式的值。如果左边是false 右边就不求值。如果左边是 true ，才计算右边表达式的值
const el3 = <div>{loading && loadingUI}</div>;
// 渲染到页面上
root.render([el, el2, el3]);
